<template>
  <div class="rollContainer">
    <div class="searchHead" ref="searchHead">
      <Form ref="formInline" :model="conditions" inline :label-width="100" :show-message="false">
        <div class="searchBox">
          <div class="conditionBox">
            <Row>
               <Col :span="6">
                <FormItem label="展会名称：" prop="miceId">
                  <Select
                    v-model="conditions.miceId"
                    clearable
                    @on-change="changeStatus($event, 'miceId')"
                  >
                    <Option
                      v-for="item in mices"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div class="searchBtnBox">
            <Button type="primary" @click="search()">搜索</Button>
            <Button @click="handleReset()">重置</Button>
          </div>
        </div>
      </Form>
      <div class="tableBtnBox">
        <Button icon="ios-sync" size="default" @click="sync">同步素材</Button>
      </div>
    </div>
    <Table :columns="columns1" :height="tableHeight" border :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="create_time">
        <span>{{row.create_time|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="update_time">
        <span>{{row.update_time|dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
      </template>
      <template slot-scope="{ row }" slot="status">
        <i-switch
          v-model="row.status"
          true-value="0"
          false-value="1"
          size="small"
          @on-change="change($event,row)"
        />
      </template>
    </Table>
    <div class="pageBox">
      <Page
        :total="total"
        :page-size="pageSize"
        :current="page"
        size="small"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
  </div>
</template>
<script>
import {
  newsList,syncNew,
  setNew
} from "../../api/log.js";
import {miceList} from "../../api/exhibitors.js";
import upload from "@/components/upload.vue";
export default {
  components: {
  },
  data() {
    return {
      list: [],
      mices: [],
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      conditions: {
        miceId: "",
      },
      columns1: [
        {
          title: "id",
          key: "id",
          align: "center",
          minWidth: 200
        },
        {
          title: "名称",
          key: "title",
          align: "center",
          minWidth: 200
        },
        {
          title: "描述",
          key: "digest",
          align: "center",
          minWidth: 200
        },
         {
          title: "路径",
          key: "url",
          align: "center",
          minWidth: 200
        },
        {
          title: "发布时间",
          slot: "create_time",
          align: "center",
          minWidth: 200
        },
        {
          title: "更新时间",
          slot: "update_time",
          align: "center",
          minWidth: 200
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
          minWidth: 200
        },
      ],
      tableHeight: 100,
    };
  },
  created() {
      this.getmiceList();
      this.getnewsList();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.searchHead.offsetHeight - 220;
    });
  },
  methods: {
       //展会列表
    getmiceList() {
      miceList({ page: 0, pageSize: 999999, type: 0 }).then(res => {
        if (res.status) {
          console.log(res.data.list);
          this.mices = res.data.list.map(e => {
            return {
              value: e.miceId,
              label: e.miceName
            };
          });
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    changeStatus(e, name) {
      this.page = 1;
      this.conditions[name] = e;
      this.getnewsList();
    },
    change(e, row) {
      this.$Modal.confirm({
        title: "警告",
        content: `确认要更新新闻状态？（打开默认显示）`,
        onOk: () => {
          setNew({ id: row.id, status: e }).then(res => {
            if (res.status) {
              this.$Message.success("修改成功");
            } else {
              if (e == 1) {
                row.status = "0";
              } else {
                row.status = "1";
              }
              this.$Message.error(res.msg);
            }
          });
        },
        onCancel: () => {
          if (e == 1) {
            row.status = "0";
          } else {
            row.status = "1";
          }
        }
      });
    },
    //同步
    sync(){
      this.loading = true;
      syncNew({miceId:this.conditions.miceId?this.conditions.miceId:localStorage.getItem('miceId')}).then(res =>{
         if (res.status) {
           this.$Message.success(res.data);
          this.getnewsList()
        } else {
          this.$Message.error(res.msg);
        }
      })
    },
    getnewsList() {
      //文章列表
      this.loading = true;
      const { page, pageSize } = this;
      newsList(
        Object.assign(this.conditions, { page: page - 1, pageSize })
      ).then(res => {
        if (res.status) {
          this.total = res.data.count;
          this.list = res.data.list;
          this.loading = false;
        } else {
          this.$Message.error(res.msg);
          this.loading = false;
        }
      });
    },
    changePage(e) {
      this.page = e;
      this.getnewsList();
    },
    changeSize(e) {
      this.page = 1;
      this.pageSize = e;
      this.getnewsList();
    },
    search() {
      this.getnewsList();
    },
    handleReset() {
      this.conditions = {
        miceId:''
      };
      this.page = 1;
      this.getnewsList();
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
